<template>

    <div v-for="val of list" class="row box h" @click="selectCoupon(val)">
        <div v-if="selectMode" class="checkboxArea ui-v-a">
            <div class="checkbox" :data-check="selected&&selected._id == val._id?'true':'false'"></div>
        </div>
        <div class="coupon ui-v-a">
            <div v-if="val.type==0" :class="['discount', 'zk', val.expired>Date.now()?'':'un']">
                <h2>{{Math.floor(val.zk/10)}}</h2>

                <h3>.{{val.zk%10}}折</h3>
            </div>

            <div v-else :class="['discount', 'man', val.expired>Date.now()?'':'un']">
                <div class="ui-price"><span>{{val.minus/10}}</span></div>
            </div>
            <div :class="['info',val.expired>Date.now()?'':'un']">
                <h1>{{val.title}}</h1>
                <ul>
                    <li v-for="row of getDesc(val)">{{row}}</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="tips">
        没有更多优惠券
    </div>
</template>

<script type="text/babel">
    import http from '../libs/http'
    import {eventBus} from '../libs/eventBus'
    import {orderService} from '../stores/order'
    import {dateFormat} from '../filters/dateFormat';

    export default{
        data(){
            return {
                selectMode: false,
                selected: {
                    _id: ''
                },
                list: []
            };
        },
        computed: {
            selectMode: function () {
                return this.$route.name == 'selectCoupon';
            }
        },

        attached: function () {
            var self = this;

            if (this.selectMode) {
                this.selected = orderService.pure.coupon;
            }

            http.get({
                        url: api + 'user/coupon',
                        jsonp: true
                    })
                    .then(function (obj) {
                        if (obj.code == 0) {
//                            obj.data[0].expired = Date.now()-100000;
                            self.list = obj.data;
                        }
                    });

        },
        methods: {
            selectCoupon: function (coupon) {
                var self = this;
                if (this.selectMode) {
                    orderService.changeCoupon(coupon, function (obj) {
                        if (obj.code == 0)
                            history.back();
                        else if (obj.msg)
                            self.$dispatch('toast', obj.msg);
                    });
                }
            },

            getTitle: function (coupon) {
                if (coupon) {
                    var title = '';
                    if (coupon.range_type == 0)
                        title = '全场通用';
                    else {
                        coupon.range.forEach(function (range) {
                            title += range.name;
                        });

                        title += '专用';
                    }

                    if (coupon.type == 0)
                        title += coupon.zk / 10 + '折'//最高抵' + coupon.minus / 10;
//                    else
//                        title += '满' + coupon.man + '抵' + coupon.minus / 10;

                    return title + '券';
                } else
                    return '无';
            },

            getDesc: function (coupon) {

                var desc = [];

                desc.push(this.getTitle(coupon));

                var isExpired = coupon.expired < Date.now;

                desc.push(dateFormat(coupon.expired, 'yyyy-MM-dd前可以使用' + (isExpired ? '(已过期)' : '')));

                var isZK = coupon.type == 0;

                if (isZK)
                    desc.push(' 最高抵' + coupon.minus / 10 + '元');
                else if (coupon.man > 0)
                    desc.push('满' + coupon.man / 10 + '元可用');


                if (coupon.range_except && coupon.range_except.length > 0) {
                    var except = '';

                    coupon.range_except.forEach(function (tmp_except) {
                        except += tmp_except.name;
                    });

                    except += '除外';

                    desc.push(except);
                }

                return desc;
            }
        }
    }
</script>

<style scoped>
    .coupon {
        flex-grow: 1;
        padding: 8px 0;
        border: solid 1px #f0f0f0;
        background: url(../../static/img/dec_triangle.png) white no-repeat right bottom;
        background-size: 21px;
        height: 64px;
    }

    .checkboxArea {
        text-align: center;
        width: 40px;
    }

    .checkbox {
        width: 16px;
        height: 16px;
        background: url("../../static/img/spit_Checkbox.png") no-repeat;
        background-size: 16px;
        display: inline-block;
        vertical-align: middle;
    }

    .checkbox[data-check="false"] {
        background-position: 0 0;
    }

    .checkbox[data-check="true"] {
        background-position: 0 -16px;
    }

    .row {
        margin: 8px;
        align-items: center;
    }

    .discount {
        display: inline-block;
        vertical-align: middle;
        min-width: 80px;
        text-align: center;
        white-space: nowrap;
        margin: 8px;
        border-right: solid 1px #dddddd;
        color: red;
    }

    .discount.un {
        color: #ddd;
    }

    h2 {
        font-size: 36px;
        font-weight: lighter;
        display: inline-block;
    }

    h3 {
        font-size: 18px;
        font-weight: normal;
        display: inline-block;
        position: relative;
        right: 5px;
    }

    .man .ui-price {
        font-weight: lighter;
        position: relative;
        right: 5px;
        font-size: 25px;
    }

    .info {
        display: inline-block;
        vertical-align: middle;
    }

    h1 {
        font-weight: lighter;
        font-size: 14px;
    }

    .info li {
        margin-left: 16px;
        font-size: 10px;
        color: #888888;
        height: 1.2em;
    }

    .info.un li {
        color: #ddd;
    }

    [data-avaliable="false"] {
        opacity: 0.3;
    }

    .tips {
        text-align: center;
        font-size: 12px;
        color: #888888;
        padding: 8px;
    }
</style>